<template>
	<view>
		<view class="box">
			<view class="re">
				<view class="privileges_num_pos">{{wallet.qy.length}}</view>
				<view class="fz_hint_pos">
					<view class="" v-if="wallet.is_vip == 0">加入我们，权益特权享不停</view>
					<view class="" v-if="wallet.is_vip == 1">有效期至：{{wallet.vip_time}}</view>
				</view>
				<view class="operate_btn_pos" @click="rechargeLock">
					{{wallet.is_vip == 1 ? '立即续费': '立即开通'}}
					{{wallet.vip_price}}/年
				</view>

				<view class="content_box_pos">
					<view class="re tac">
						<image src="@/static/icon_fz_1.png" class="vt" style="width: 360rpx; height: 50rpx;"></image>
					</view>

					<view class="mt35 btn_srm_sty">
						<view v-for="(item,index) in wallet.qy" :key="index" class="hp100" style="line-height: 1.5;">
							{{item}}
						</view>

					</view>
				</view>
				<image src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/page_3.png"
					class="wp100 vt" mode="widthFix"></image>
			</view>
		</view><!-- box -->

		<payment v-model:show="payState.showPay" v-model:show-check="payState.showCheck" :order-id="payState.orderId"
			:from="payState.from" :redirect="payState.redirect" @success="handlePaySuccess" @fail="handlePayFail" />
	</view>
</template>


<script setup lang="ts">
	import { getVip, recharge } from '@/api/vip'
	import { reactive, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useLockFn } from '@/hooks/useLockFn'

	const payState = reactive({
		orderId: '',
		from: '',
		showPay: false,
		showCheck: false,
		redirect: '/packages/pages/recharge/recharge'
	})

	const { isLock, lockFn: rechargeLock } = useLockFn(async () => {
		const data = await recharge({})
		payState.orderId = data.order_id
		payState.from = data.from
		payState.showPay = true
	})

	const handlePaySuccess = async () => {
		payState.showPay = false
		payState.showCheck = false
		uni.navigateTo({
			url: `/pages/payment_result/payment_result?id=${payState.orderId}&from=${payState.from}`
		})
	}

	const handlePayFail = async () => {
		uni.$u.toast('支付失败')
	}



	const wallet = reactive({
		vip_price: 0.00,
		is_service: '',
		agent_ratio: '',
		qy: [],
		is_vip: 0,
		vip_time: ''
	})

	const getWallet = async () => {
		const data = await getVip({})
		Object.assign(wallet, data)
	}

	onShow(() => {
		getWallet()
	})
</script>

<style>
	page {
		background: #242424;
	}

	.content_box_pos {
		position: absolute;
		top: 815rpx;
		left: 0;
		width: 100%;
		z-index: 2;
	}

	.privileges_num_pos {
		position: absolute;
		top: 269rpx;
		left: 300rpx;
		width: 96rpx;
		text-align: center;
		font-size: 68rpx;
		font-weight: bold;
		color: #EB9C5A;
		z-index: 2;
	}

	.fz_hint_pos {
		position: absolute;
		top: 416rpx;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 22rpx;
		color: #333;
		z-index: 2;
	}

	.operate_btn_pos {
		position: absolute;
		top: 582rpx;
		left: 50%;
		width: 340rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		font-size: 30rpx;
		color: #6C250F;
		background: linear-gradient(90deg, #F9DCB7 0%, #F9DCB7 50%, #F9DCB7 100%);
		border-radius: 34rpx;
		z-index: 2;
		transform: translateX(-50%);
	}

	.btn_srm_sty {
		position: relative;
		display: block;
		padding: 20rpx;
		width: 550rpx;
		font-size: 36rpx;
		color: #6C250F;
		font-weight: bold;
		background: linear-gradient(90deg, #FFF6EE 0%, #F1DBBC 100%);
		border-radius: 20rpx;
		margin-left: auto;
		margin-right: auto;
	}
</style>